<template>
  <div class="choice">
    <van-skeleton title :row="18" :loading="loading">
      <div class="top-wrap">
        <div class="wrap">
          <div class="left-wrap">
            <p class="choice-name">{{ info.name }}</p>
            <p class="pro">主办单位：{{ info.for_name }}</p>
            <p class="address">
              <i class="iconfont icon-map"></i>
              <span>地址：{{ info.address }}</span>
            </p>
          </div>
          <div class="right-wrap">
            <img :src="info.images"/>
          </div>
        </div>
        <div class="time">
          <p>双选会时间：{{ info.start_time }} - {{ info.end_time }}</p>
        </div>
      </div>
      <van-button type="info" round size="large" @click="submit" v-if="this.$root.userInfo && this.$root.userInfo.usertype==1">
        {{ info.statusText }}</van-button>
      <div class="show-wrap">
        <van-tabs v-model="active" color="#4771dc" title-active-color="#4771dc" swipeable>
          <van-tab title="参会企业" v-if="info.status == 2">
            <div class="showList">
              <choice-list v-if="companyList.length>0" :list="companyList" :finished.sync="finished" :loading.sync="loading" @toFetch="fetchData"/>
              <div class="noData" v-if="companyList.length===0">
                <p>{{ finished ? '暂无数据' : '加载中...' }}</p>
              </div>
            </div>
          </van-tab>
          <van-tab title="双选会简介">
            <div class="intro" v-html="info.desc"></div>
          </van-tab>
        </van-tabs>
      </div>
    </van-skeleton>
  </div>
</template>

<script>
import { getChoiceDetail } from '@/api/choice'
import { orderComfirm } from '@/api/order';
import ChoiceList from '@/components/choice-list/choice-list'

export default {
  name: 'Choice',
  components: { ChoiceList },
  data () {
    return {
      id: '',
      cityid: '',
      industry: '',
      posttypeid: '',
      info: {},
      companyList: [],
      pageNo: 1,
      active: 0,
      finished: true,
      loading: true,
    }
  },
  created () {
    this.id = this.$route.query.id || ''
    this.fetchData()
  },
  mounted () {
  },
  methods: {
    submit(){
      orderComfirm({
        id: this.id,
      }).then(res => {
        if (res.code === 200) {
          if (res.data.order_id === -1) {
            location.reload();
          }
        } else {
          this.$alertErr(res.msg);
        }
      }).catch(err => {
        this.$alertErr(err);
      })
    },
    fetchData () {
      getChoiceDetail({
        id: this.id,
        cityid: this.cityid,
        industry: this.industry,
        posttypeid: this.posttypeid,
        page: this.pageNo++,
      }).then(res => {
        if (res.code === 200) {
          this.info = res.data.info
          this.companyList = res.data.list
          let timer = setTimeout(()=> {
            this.loading = false
            clearTimeout(timer)
            timer = null
          }, 1000)
        } else {
          this.$alertErr(res.msg)
        }
      }).catch(err => {
        this.$alertErr(err)
      })
    },
  },

}
</script>

<style lang="stylus" scoped>
.choice {
  background: #f6f7f8;

  .top-wrap {
    background: #fff;
  }

  .wrap {
    display: flex;
    padding: 20px 20px 0 20px;

    .left-wrap {
      flex: 1;
      max-width: 265px;

      .choice-name {
        max-width: 265px;
        font-size: 18px;
        color: $color-text;
      }

      .pro {
        width: 120%;
        margin: 10px 0;
        font-size: 12px;
        color: #666;
      }

      .address {
        line-height: 12px;

        i {
          display: inline-block;
          color: $color-main;
          font-size: 12px;
          vertical-align: middle;
          margin-top: -1px;
        }

        span {
          margin-left: 5px;
          display: inline-block;
          vertical-align: middle;
          font-size: 12px;
          color: #666;
        }
      }
    }

    .right-wrap {
      flex: 0 0 75px;
      line-height: 73px;
      height: 75px;
      width: 75px;
      overflow: hidden;
      background: #fff;
      text-align: center;
      border: 1px solid #ebebeb;
      border-radius: 50%;

      img {
        height: 65px;
        width: 65px;
        vertical-align: middle;
      }
    }
  }

  .time {
    padding-left: 25px;
    margin-top: 10px;
    width: 120%;
    transform: scale(.83);
    transform-origin left

    p {
      position: relative;
      font-size: 12px;
      color: #999;
      padding-left: 10px;
      padding-bottom: 20px;

      &::before {
        content: '';
        height: 12px;
        width: 2px;
        background: $color-main;
        position: absolute;
        left: 2px;
        top: 3px;
      }
    }
  }

  .show-wrap {
    min-height: 290px;
    margin-top: 10px;

    /deep/ .van-tabs {
      .van-tabs__wrap {
        height: 40px;
        border-bottom: 1px solid #f5f5f5;

        .van-tab {
          height: 40px;

          span {
            line-height: 40px;
            font-size: 16px;
            color: #333;
          }

          &.van-tab--active {
            span {
              color: $color-main;
            }
          }
        }

        .van-tabs__line {
          width: 65px;
        }
      }
    }

    .intro {
      background: #fff;
      padding: 20px;
      font-size: 12px;
      line-height: 24px;
    }

    .noData {
      margin-top: 0;
      min-height: calc(100vh - 55px - 210px - 50px - 100px);
    }
  }
}

</style>

